/* 文本标签
 * LabelComponent.jsx
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';


class LabelComponent extends Component{

	constructor(props){
		super(props);
		this.state={
			editable:false
		}
	}

	dragStart(e){
		if(this.props.dragStart){
			this.props.dragStart(e,this.props.data.get('id'));
		}
	}

	dragEnd(e){
		if(this.props.dragEnd){
			this.props.dragEnd(e,this.props.data.get('id'));
		}
	}

	onDoubleClick(e){
		e.preventDefault()|| e.stopPropagation();//阻止冒泡
		this.setState({editable:true});
		//e.target.focus();
	}

	onBlur(e){
		this.setState({editable:false});
	}

	onSelectComp(e){
		e.preventDefault()|| e.stopPropagation();//阻止冒泡
		this.props.onSelectComp(this.props.data);
	}

	render(){
		const surface=this.props.data.get('surface');
		const attributes=this.props.data.get('attributes');
		//border: 3px dotted black;
		const widthHeight={width: surface.get('width')+'px', height: surface.get('height')+'px'};//宽高
		//动画
		//const animation={animationDuration: '1s', animationDirection: 'normal'};

		const posStyle=Object.assign({left: surface.get('x')+'px', top: surface.get('y')+'px'},widthHeight,{display:this.props.data.get('hidden')?'none':'block'});
		const borderStyle={border: surface.get('borderSize')+'px '+surface.get('border'),borderRadius: surface.get('borderRadius'),borderColor: surface.get('borderColor')};
		const surfaceStyle=Object.assign({transform:'rotate('+surface.get('rotate')+'deg)',opacity:surface.get('opacity'),background:surface.get('background')},widthHeight,borderStyle);//旋转度，透明度，背景色,边框
		const labelStyle=Object.assign({verticalAlign:'middle', textShadow:'none'},widthHeight);/*display:'table-cell' 这个会引起line-height失效*/

		const fontStyle={
			fontFamily:attributes.get('fontFamily'),
			fontSize: attributes.get('fontSize')+'px',
			color:attributes.get('fontColor'),
			display:'block'
		};
		//设置内容
		let labelContent=(
				<span style={fontStyle} contentEditable={false}
					onDoubleClick={this.onDoubleClick.bind(this)} onBlur={this.onBlur.bind(this)} >
					{attributes.get('content')}
				</span>
			);
			
		if(attributes.get("underline")){
			labelContent=(<u>{labelContent}</u>)
		}
		if(attributes.get("italic")){
			labelContent=(<i>{labelContent}</i>)
		}
		if(attributes.get("bold")){
			labelContent=(<b>{labelContent}</b>)
		}

		let divProps={}
		if(this.props.editStage){
			divProps={
				onDragStart:this.dragStart.bind(this),
				onDragEnd:this.dragEnd.bind(this), 
				onClick:this.onSelectComp.bind(this),
				id:this.props.data.get('id')
			}
		}
		return(
			<div {...divProps} className="lg-trailer" style={posStyle} draggable="true">
				<div className="lg-surface lg-surface-label" style={surfaceStyle}>
					<div className="lg-component-label" style={labelStyle} >
						{/*attributes内容*/}
						<p style={{textAlign:attributes.get("textAlign"),lineHeight:attributes.get("lineHeight")}} > {/*对齐方式，行高*/}
							{labelContent}
						</p>
					</div>
				</div>
			</div>
		)
		
		
		
	}
}

export default LabelComponent;
